<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基础演示</text>
         <view class="uv-demo-block__content">
            <uv-tabs :list="list1" @click="click" :current="3"> </uv-tabs>
         </view>
      </view>
      <view class="uv-demo-block" style="margin-bottom: 0">
         <text class="uv-demo-block__title">粘性布局</text>
      </view>
      <uv-sticky bgColor="#fff">
         <uv-tabs :list="list1"> </uv-tabs>
      </uv-sticky>
      <uv-gap height="23" bgColor="#fff"></uv-gap>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">显示徽标</text>
         <view class="uv-demo-block__content">
            <uv-tabs :list="list2"> </uv-tabs>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">禁止滚动</text>
         <view class="uv-demo-block__content">
            <uv-tabs :list="list6" :scrollable="false"> </uv-tabs>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">禁用菜单</text>
         <view class="uv-demo-block__content">
            <uv-tabs :list="list3"> </uv-tabs>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义样式</text>
         <view class="uv-demo-block__content">
            <uv-tabs
               :list="list4"
               lineWidth="30"
               lineColor="#f56c6c"
               :activeStyle="{
                  color: '#303133',
                  fontWeight: 'bold',
                  transform: 'scale(1.05)',
               }"
               :inactiveStyle="{
                  color: '#606266',
                  transform: 'scale(1)',
               }"
               itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
            >
            </uv-tabs>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">滑块设置背景图</text>
         <view class="uv-demo-block__content">
            <uv-tabs
               :list="list4"
               lineWidth="20"
               lineHeight="7"
               :lineColor="`url(${lineBg}) 100% 100%`"
               :activeStyle="{
                  color: '#303133',
                  fontWeight: 'bold',
                  transform: 'scale(1.05)',
               }"
               :inactiveStyle="{
                  color: '#606266',
                  transform: 'scale(1)',
               }"
               itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
            >
            </uv-tabs>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">右侧自定义插槽</text>
         <view class="uv-demo-block__content">
            <uv-tabs :list="list1">
               <template v-slot:right>
                  <view style="padding-left: 4px" @tap="clickHandle">
                     <uv-icon name="list" size="21" bold></uv-icon>
                  </view>
               </template>
            </uv-tabs>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const lineBg =
   '';

// 响应式数据
const list1 = ref([
   { name: '关注' },
   { name: '推荐' },
   { name: '电影' },
   { name: '科技' },
   { name: '音乐' },
   { name: '美食' },
   { name: '文化' },
   { name: '财经' },
   { name: '手工' },
]);

const list2 = ref([
   { name: '关注' },
   {
      name: '推荐',
      badge: {
         isDot: true,
      },
   },
   {
      name: '电影',
      badge: {
         value: 5,
      },
   },
   { name: '科技' },
   { name: '音乐' },
   { name: '美食' },
   { name: '文化' },
   { name: '财经' },
   { name: '手工' },
]);

const list3 = ref([
   { name: '关注' },
   { name: '推荐' },
   {
      name: '电影',
      disabled: true,
   },
   { name: '科技' },
   { name: '音乐' },
   { name: '美食' },
   { name: '文化' },
   { name: '财经' },
   { name: '手工' },
]);

const list4 = ref([
   { name: '关注' },
   {
      name: '推荐',
      badge: {
         isDot: true,
      },
   },
   { name: '电影' },
   { name: '科技' },
   { name: '音乐' },
   { name: '美食' },
   { name: '文化' },
   { name: '财经' },
   { name: '手工' },
]);

const list6 = ref([{ name: '关注' }, { name: '推荐' }, { name: '电影' }, { name: '科技' }]);

// 方法
const click = (item: any) => {
   console.log('item', item);
};

const clickHandle = () => {
   uni.showToast({
      title: '插槽被点击',
      icon: 'none',
   });
};
</script>

<style lang="scss" scoped></style>
